import {statisticsByIndustry, statisticsByCourse} from "@/api/statisticsApi";
import {removeCookie} from "@/utils/auth";

let echarts = require("echarts");
require("echarts/lib/component/tooltip"); //提示框
export default {
    data() {
        return {
            options: {}
        }
    },
    created() {
        this.searchStatOfIndustry();
    },
    methods: {
        //通过专业查询报名人数
        searchStatOfIndustry() {
            statisticsByIndustry().then(res => {
                //整理图表数据
                let xAxisData = [];
                let seriesData = [];
                res.forEach(item => {
                    xAxisData.push(item.name);
                    seriesData.push(item.totalNum);
                });
                this.setBarChart(xAxisData, seriesData)
                this.searchStatOfCourse();
            }, err => {
            })
        },
        //通过课程查询报名人数
        searchStatOfCourse() {
            statisticsByCourse().then(res => {
                //整理图表数据
                let xAxisData = [];
                let seriesData = [];
                res.forEach(item => {
                    xAxisData.push(item.name);
                    seriesData.push(item.totalNum);
                });
                this.setBarChart2(xAxisData, seriesData)
            }, err => {
            })
        },
        setBarChart(xAxisData, seriesData) {
            let barCharts = echarts.init(this.$refs.barCharts);
            barCharts.setOption({
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        crossStyle: {
                            color: "#000"
                        }
                    }
                },
                grid: {
                    left: '5%',
                    // right: '4%',
                    top: '30%',
                    containLabel: true
                },

                legend: {
                    x: 'right',
                    y: '5%',
                    position: 'right',
                    // data: ["集团值", "预测值"],
                    textStyle: {
                        color: "#000" // 图例文字颜色
                    }
                },
                xAxis: [
                    {
                        type: "category",
                        data: xAxisData,
                        axisPointer: {
                            type: "shadow"
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: "#4aa9ce"
                            }
                        }

                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "用户",
                        textStyle: {
                            color: "#000"
                        },
                        splitNumber: 3,
                        axisLabel: {
                            formatter: "{value} 人",
                            textStyle: {
                                color: "#000"
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#000',

                            }
                        },
                    },
                ],
                series: [
                    {
                        name: "专业人数",
                        type: "bar",
                        barGap: '0',
                        data: seriesData,
                        color: ["#14ca9f"],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,		//开启显示
                                    position: 'top',	//在上方显示
                                    textStyle: {	    //数值样式
                                        color: '#000',
                                        fontSize: 16
                                    }
                                },
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#1ADE9D'},                   //柱图渐变色
                                        {offset: 0.5, color: '#0FB3A1'},                 //柱图渐变色
                                        {offset: 1, color: '#0489A5'},                   //柱图渐变色
                                    ]
                                )
                            }
                        },
                    },
                ]
            });
        },
        setBarChart2(xAxisData, seriesData) {
            let barCharts = echarts.init(this.$refs.barCharts2);
            barCharts.setOption({
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        crossStyle: {
                            color: "#000"
                        }
                    }
                },
                grid: {
                    left: '5%',
                    // right: '4%',
                    top: '30%',
                    containLabel: true
                },

                legend: {
                    x: 'right',
                    y: '5%',
                    position: 'right',
                    // data: ["集团值", "预测值"],
                    textStyle: {
                        color: "#000" // 图例文字颜色
                    }
                },
                xAxis: [
                    {
                        type: "category",
                        data: xAxisData,
                        axisPointer: {
                            type: "shadow"
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: "#4aa9ce"
                            }
                        }

                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "用户",
                        textStyle: {
                            color: "#000"
                        },
                        splitNumber: 3,
                        axisLabel: {
                            formatter: "{value} 人",
                            textStyle: {
                                color: "#000"
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#000',

                            }
                        },
                    },
                ],
                series: [
                    {
                        name: "课程人数",
                        type: "bar",
                        data: seriesData,
                        color: ["#b5b312"],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,		//开启显示
                                    position: 'top',	//在上方显示
                                    textStyle: {	    //数值样式
                                        color: '#000',
                                        fontSize: 16
                                    }
                                },
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#16A0F4'},                   //柱图渐变色
                                        {offset: 0.5, color: '#0F79E2'},                 //柱图渐变色
                                        {offset: 1, color: '#074ACD'},                   //柱图渐变色
                                    ]
                                )
                            }
                        },
                    },
                ]
            });
        },
    },
}